<template>
    <div>
        <!-- 查询form -->
        <Form :model="selectCriteria" inline>
            <FormItem prop="param">
                <Input type="text" v-model="selectCriteria.param" :placeholder="labelName">
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="queryData">搜索</Button>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="cleanParam">清空</Button>
            </FormItem>
        </Form>

        <!-- 表格内容 -->
        <Table :columns="columnList" :data="tableData"></Table>
        <br>
        <Page @on-change="queryData" :current.sync="pageInfo.pageNum" :total="pageInfo.total" :page-size="  
            pageInfo.pageSize" show-elevator size="small"></Page>

    </div>

</template>
<script>
    export default {
        props: {
            //label展示内容
            labelName : {
                type: String,
                default: '查询条件'
            },
            //搜索框提示文字
            placeholder : {
                type: String,
                default: '请输入搜索条件'
            },
            //搜索url
            searchUrl : {
                type: String,
                default: null
            },
            //表头
            columnList : {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
        watch: {
        },
        data() {
            return {
              //查询条件
              selectCriteria:{
                param:''
              },
              //表格数据
              tableData:[],
              //分页
              pageInfo:{
                pageNum:1,//当前页码
                pageSize:10,//每页显示条数
                total:0
              }
            }
        }, 
        //初始化方法
        mounted() {
            this.init();
        }, 
        methods: {
            //清空查询条件
            cleanParam(){
                this.selectCriteria.param = '';
                this.initPageInfo(1,10,0);
                this.queryData();
            },
            //组件初始化方法
            init() {
                this.queryData();                                                          
            },
            //查询分页数据
            queryData(){
                let pageSize = this.pageInfo.pageSize;
                let pageNum = this.pageInfo.pageNum;
                const _this = this;
                this.axios.post(this.searchUrl + '?pageNum=' + pageNum + '&pageSize=' + pageSize,this.selectCriteria).then(response => {
                    var res = response.data;
                    var resMeta = res.meta;
                    if (0 == resMeta.code) {
                        _this.buildPageData(res.data);
                    } else {
                        _this.$Message.warning(resMeta.message);
                    }
                });
            },
            /**
             *  构建表格数据
             */
            buildPageData(data_) {
                this.tableData = data_.list;
                this.pageInfo.total = data_.total;
            },
            //初始化分页
            initPageInfo(pageNum,pageSize,total){
                if(pageNum != 0){
                    this.pageInfo.pageNum = pageNum;
                }
                this.pageInfo.pageSize = pageSize;
                this.pageInfo.total = total;
            }
        }
    }
</script>